<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增字典</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../../admin/css/reset.css"/>
</head>
<body>

<form class="layui-form" action="" lay-filter="create-data-form">

    <div class="mainBox">
        <div class="main-container mr-5">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">所属上级</label>
                    <div class="layui-input-inline">
                        <ul id="selTree3" class="dtree" data-id="-1"></ul>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">类别名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入类别名称">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="number" name="sort" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入类别名称" value="10">
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="" class="layui-textarea" name="remarks"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
                    lay-filter="save">
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-md">
                重置
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../lms/base64.js"></script>
<script src="../../../lms/common.js"></script>
<script src="../../../lms/permission.js"></script>
<script src="../../../lms/config.js"></script>
<script>


    const PRIMARY_KEY = "id";
    const RESTFUL_API = lms_config.api_url + "/adminapi/file/category";

    // 字段设置
    layui.use(["common", "popup", "form", "jquery", "dtree"], function () {

        let table = layui.table;
        let common = layui.common;
        let popup = layui.popup;
        let form = layui.form;
        let method = 'POST';
        let $ = layui.jquery;
        let Dtree = layui.dtree;
        let superiorData = [];


        /**
         * 所属上级获取
         */
        layui.$.ajax({
            url: RESTFUL_API,
            type: 'GET',
            dataType: 'json',
            data: {all: 1},
            async: false,
            success: function (ret) {
                let data = ret.data.list != undefined ? ret.data.list : [];
                data.unshift({
                    "id": '-1',
                    "name": "顶层",
                });
                superiorData = data;
            },
            error: function (ret) {
                superiorData = [{
                    "id": '-1',
                    "name": "顶层",
                }];
            },
        });


        if (getQueryString('operation') == 'add') {
            let pid = getQueryString('pid')
            Dtree.renderSelect({
                elem: "#selTree3",
                data: superiorData,
                accordion: true,
                icon: "-1",  // 隐藏二级图标
                skin: "layui",
                width: '100%',
                selectCardHeight: "200",
                selectInitVal: '-1',//默认值顶层
                response: {
                    treeId: "id", //节点ID（必填）
                    parentId: "pid", //父节点ID（必填）
                    title: "name", //节点名称（必填）
                },
                selectInputName: {
                    nodeId: "pid",
                    context: "请选择父级"
                },
                done: function (res, $ul, first) {
                    if (first) {
                        //首次赋值顶层
                        Dtree.dataInit("selTree3", pid);
                        Dtree.selectVal("selTree3");
                    }
                }
            });
        }

        if (getQueryString('operation') == 'edit') {
            method = 'PUT'
            $.ajax({
                url: RESTFUL_API + '/' + getQueryString(PRIMARY_KEY),
                dataType: "json",
                success: function (ret) {
                    if (ret.status == 200) {
                        let data = ret.data ?? {};
                        form.val('create-data-form', data)
                        //下拉框赋值
                        Dtree.renderSelect({
                            elem: "#selTree3",
                            data: superiorData,
                            accordion: true,
                            line: true, // 有线树
                            icon: "-1",  // 隐藏二级图标
                            startNode: '-1',
                            skin: "layui",
                            width: '100%',
                            selectCardHeight: "200",
                            selectInitVal: '-1',//默认值顶层
                            response: {
                                treeId: "id", //节点ID（必填）
                                parentId: "pid", //父节点ID（必填）
                                title: "name", //节点名称（必填）
                            },
                            request: {
                                pid: "-1"
                            },
                            selectInputName: {
                                nodeId: "pid",
                                context: "请选择父级"
                            },
                            done: function (res, $ul, first) {
                                if (first) {
                                    //首次赋值顶层
                                    Dtree.dataInit("selTree3", data.pid);
                                    Dtree.selectVal("selTree3");
                                }
                            }
                        });
                    }
                }
            });

            layui.$("button[type='reset']").click(function () {
                location.reload();
            })
            form.render()
        }


        form.on("submit(save)", function () {
            let data = layui.form.val("create-data-form");
            layui.$.ajax({
                url: method == 'POST' ? RESTFUL_API : RESTFUL_API + '/' + getQueryString(PRIMARY_KEY),
                type: method,
                dateType: "json",
                data: data,
                success: function (ret) {
                    if (ret.status == 200) {
                        popup.success(ret.msg, function () {
                            parent.refreshTable();
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    } else {
                        popup.failure(ret.msg);
                    }
                }
            });
            return false;
        });

        $("body").on("click", function (event) {
            $("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
            $("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
        });

    });


</script>

</body>
</html>
